<template>
	<view class="store">
		<view class="storeItem"  v-for="(item, index) in list " :key="index">
			<view class="storeHeader flex">
				<image :src="item.restaurant.rpicture " mode=""></image>
				<view class="info">
					<view class="name textHd">
						{{item.restaurant.shopname }}
					</view>
					<view class="instoduction textHd">
						{{item.restaurant.shopAddress}} | 店铺评分{{item.restaurant.shopScore }}
					</view>
				</view>
				<view class="btn">
					<button @click.stop="navtoStore(item.restaurant.rid )">查看</button>
				</view>
			</view>
			<!-- 图片 -->
			<view class="imageList flex">
				<view class="" v-for="(item2, index) in item.dFoods" :key="index">
					<image :src="item2.fpicture" ></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"restaurantList",
		props: {
			list : {
				type: Array,
				required: true,
				default() {
					return []
				}  
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			navtoStore (id) {
				uni.navigateTo({
					url: `../store_details/store_details?id=${id}`
				})	
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store {
		margin-top: 18rpx;
	}
.storeItem {
	background-color: #fff;
	padding: 18rpx;
	margin-bottom: 18rpx;
	.storeHeader {
		justify-content: space-between;
		image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 12rpx;
		}
		.info {
			width: 420rpx;
			.instoduction {
				color: #999;
				font-size: 24rpx;
			}
		}
		.btn {
			width: 120rpx;
			button {
				width: 118rpx;
				height: 60rpx;
				color: #fff;
				font-size: 24rpx;
				background-color: #1890ff;
				border: 1rpx solid #1890ff!important;
			}
		}
	}
	.imageList {
		margin-top: 36rpx;
		justify-content: space-between;
		padding: 18rpx 0;
		image {
			width: 220rpx;
			height: 160rpx;
		}
	}
}
</style>
